<template>
	<view class="page">
		<view class="topbar">
			<navigator url="/pages/kind/kind" open-type="switchTab" class="back"> < </navigator>
			<text>{{title}}</text>
		</view>
		<view class="head-bar">
			<text v-for="item in tags" :class="{'active': type==item.type}" @tap="toggle(item.type)">{{item.name}}</text>
		</view>
		<view class="content">
			<navigator :url="`/pages/kind/gooditem?productId=` + item.id" class="per" v-for="item in goodslist" :key="item.id">
				<image :src="item.cover_img"></image>
				<view class="text-area">
					<view class="title">{{item.gname}}</view>
					<view class="info">
						<text>￥{{item.price_now || 0}}</text>
						<text>{{item.origin_city || '不凡'}}</text>
					</view>
				</view>
			</navigator>
			<view class="per"></view>
		</view>
	</view>
</template>

<script>
	import goodsApi from '@/api/kind/goods.js' 
	export default{
		data(){
			return{
				kindId:'',
				title:'',
				goodslist:[],
				page: {
					start: 1,
					limit: 10,
					lastPage: false
				},
				type:0,
				tags:[
					{
						name:'新品',
						type:0
					},
					{
						name:'销量',
						type:1
					},
					{
						name:'价格',
						type:2
					},
					{
						name:'筛选',
						type:3
					}
				]
			}
		},
		onLoad(option) {
			// console.log(option)
			this.kindId = option.id
			this.getgoodsList()
			
		},
		methods:{
			toggle(type){
				console.log(type)
				this.type = type
			},
			async getgoodsList(){
				var pageP = {
					start:this.page.start,
					limit:this.page.limit
				}
				var res = await goodsApi.goodsList({
					kindId:this.kindId,
					...pageP
				})
				console.log(res)
				this.title = res.kind.ctitle
				this.goodslist = res.data.list
			}
		}
	}
</script>

<style lang="scss" scoped>
.topbar{
		position: fixed;
		left: 0;
		top: 0;
		background-color: #354e44;
		color: #fff;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		z-index: 998;
		.back{
			font-size: 24px;
			position: absolute;
			left: 20px;
		}
}
.head-bar{
	position: fixed;
	left: 0;
	top: 0;
	top: 40px;
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 31px;
	padding-top: 7px;
	background-color: #354E44;
	border-top: 1px solid #C0C0C0;
	color: #fff;
	font-size: 15px;
	line-height: 31px;
	z-index: 999;
	.active{
		color:orange;
		border-bottom: 1px solid orange;
	}
}
.content{
	width: 100%;
	margin-top: 100px;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	overflow: hidden;
	.per{
		width: 158px;
		height: 209px;
		// margin-left: 20px;
		margin-bottom: 20px;
		background-color: #fff;
		border-radius: 4px;
		&:nth-last-child(1){
			height: 0;
		}
		image{
			width: 158px;
			height: 119px;
		}
		.text-area{
			width: 158px;
			height: 86px;
			padding: 18px;
			box-sizing: border-box;
			.title{
				width: 122px;
				height: 19px;
				margin: 4px 0 0;
				color: #3E3E3E;
				font-size: 13px;
				font-weight: bold;
				line-height: 19px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				font-size: 13px;
			}
		}
	}
}
</style>
